<template>
  <transition name="slide">
    <music-list :songs='songs' :title='title' :bg-image='bgImage' :rank="rank"></music-list>
  </transition>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import MusicList from 'components/music-list/MusicList';
  import {
    getRankInfo
  } from 'api/rank';
  import {
    createSong
  } from 'common/js/song';

  export default {
    name: 'topList',
    data() {
      return {
        songs: [],
        rank: true
      }
    },
    computed: {
      ...mapState(['topList']),
      title() {
        return this.topList.topTitle
      },
      bgImage() {
        if (this.songs.length) {
          return this.songs["0"].img
        }
        return ''
      }
    },
    created() {
      this.getDetaill()
    },
    methods: {
      getDetaill() {
        if (!this.topList.id) {
          this.$router.push('/rank')
          return
        }
        getRankInfo(this.topList.id).then(res => {
          console.log(res)
          const list = res.songlist;
          this.songs = this._normalizeSongs(list)
        })
      },
      _normalizeSongs(list) {
        let ret = [];
        list.forEach(item => {
          const musicData = item.data
          if (musicData.songid && musicData.albumid) {
            ret.push(createSong(musicData))
          }
        });
        return ret
      }
    },
    components: {
      MusicList
    }
  }

</script>
